<template>
    <div>
      <el-container>
        <el-header style="display: flex; justify-content: space-between; align-items: center; padding: 10px; border-bottom: 1px solid #e4e7ed;">
          <span>
            <el-button type="primary" icon="el-icon-edit" size="small"></el-button>
            &nbsp&nbsp
            <span class="title">报警消息管理</span>
          </span>
          <div>
            <el-input placeholder="请输入关键字搜索" v-model="searchKey" style="width: 250px; margin-right: 10px;"></el-input>
            <el-button type="primary" icon="el-icon-search">高级搜索</el-button>
            <el-button type="primary" icon="el-icon-plus" @click="addTask" >查询</el-button>
            <el-button type="info" >重置</el-button>
          </div>
        </el-header>
        <el-main>
          <el-table :data="taskList" style="width: 100%" @selection-change="handleSelectionChange">
            <el-table-column type="selection" width="55"></el-table-column>
            <el-table-column fixed prop="id" label="序号" width="55"></el-table-column>
            <el-table-column prop="pile_id" label="充电桩名称" width="150"></el-table-column>
            <el-table-column prop="station_name" label="归属充电站" width="150"></el-table-column>
            <el-table-column prop="alarm_set_id" label="报警类型" width="100"></el-table-column>
            <el-table-column prop="alarm_time" label="报警时间" width="150"></el-table-column>
            <el-table-column prop="alarm_msg_condition" label="警报详情" width="250"></el-table-column>
            <el-table-column fixed="right" label="操作" width="250">
              <template slot-scope="scope">
                <el-button @click="viewTask(scope.row)" type="text" size="small">查看</el-button>
                <el-button @click="editTask(scope.row)" type="text" size="small">编辑</el-button>
                <el-button @click="submitTask(scope.row)" type="text" size="small">提交</el-button>
                <el-button @click="handleTask(scope.row)" type="text" size="small">处理</el-button>
                <el-button @click="returnTask(scope.row)" type="text" size="small">退回</el-button>
                <el-button @click="deleteTask(scope.row)" type="text" size="small">删除</el-button>
              </template>
            </el-table-column>
          </el-table>
        </el-main>
      </el-container>
    </div>
  </template>
  
  <script>
  export default {
    data() {
      return {
        searchKey: '',
        taskList: [
          // 这里可添加实际模拟数据，例如
          {
            id: 1,
            pile_id: '充电桩1',
            station_name: '充电站1',
            alarm_set_id: '报警类型1',
            alarm_time: '2023-01-01 12:00:00',
            alarm_msg_condition: '警报详情1'
          }
        ]
      };
    },
    methods: {
      handleSelectionChange() {},
      viewTask(row) {
        console.log('查看任务详情', row);
        this.$router.push('/hostDisplayDetail')
      },
      editTask(row) {
        console.log('编辑任务', row);
      },
      submitTask(row) {
        console.log('提交任务', row);
      },
      handleTask(row) {
        console.log('处理任务', row);
      },
      returnTask(row) {
        console.log('退回任务', row);
      },
      deleteTask(row) {
        console.log('删除任务', row);
      },
      addTask(row) {
        console.log('新增任务', row);
        this.$router.push('/hostDisplayAdd')
      }
    }
  };
  </script>
  
  <style scoped>
  .title {
    font-size: 20px;
    font-weight: bold;
  }
  /* 设置表格内文字自动换行 */
  .el-table {
    white-space: nowrap; /* 取消自动换行 */
    font-size: 14px; /* 把表格内字体改小，可根据实际情况调整 */
  }
  div {
    background-color: rgb(255, 255, 255);
  }
  </style>